<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){
$('#ms1').click(function(){
$('#msg1').fadeIn();
$('#msg2,#msg3').fadeOut();
})
$('#ms2').click(function(){
$('#msg1').fadeOut();
$('#msg2').fadeIn();$('#msg3').fadeOut();
})	

$('#ms3').click(function(){
$('#msg1').fadeOut();
$('#msg2').fadeOut();$('#msg3').fadeIn();
})  


$('#ms4').click(function(){
$('#msg1,#msg3').fadeOut();
$('#msg2').fadeOut();$('#msg4').fadeIn();
}) 
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">

            <p class="weui_btn_area  weui_btn_area_inline">
                <a href="javascript:;" class="weui_btn weui_btn_primary" id='ms1'>成功</a>
                <a href="javascript:;" class="weui_btn weui_btn_default" id='ms2'>失败</a>
                <a href="javascript:;" class="weui_btn weui_btn_default bg-blue" id='ms3'>页面空白</a>
                 <a href="javascript:;" class="weui_btn weui_btn_default bg-blue" id='ms4'>弹框图</a>
            </p>


<div class="weui_msg hide" id="msg1">
        <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
        <div class="weui_text_area">
            <h2 class="weui_msg_title">操作成功</h2>
            <p class="weui_msg_desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度</p>
        </div>
        <div class="weui_opr_area">
            <p class="weui_btn_area">
                <a href="javascript:;" class="weui_btn weui_btn_primary">推荐操作</a>
                <a href="javascript:;" class="weui_btn weui_btn_default">辅助操作</a>
            </p>
        </div>
        <div class="weui_extra_area">
            
        </div>
    </div>


<div class="weui_msg hide" id="msg2">
        <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
        <div class="weui_text_area">
            <h2 class="weui_msg_title">操作失败</h2>
            <p class="weui_msg_desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度</p>
        </div>
        <div class="weui_opr_area">
            <p class="weui_btn_area">
                <a href="javascript:;" class="weui_btn weui_btn_primary">推荐操作</a>
                <a href="javascript:;" class="weui_btn weui_btn_default">辅助操作</a>
            </p>
        </div>
        <div class="weui_extra_area">
            
        </div>
    </div>
    
    
 <div class="weui_msg hide" id='msg3'>
        <div class='weui_msg_box'><p><i class="icon icon-40 f20 f-green"></i>现在还没有数据</p></div>
    </div>     
 
 
       <div class="weui_msg_img hide" id='msg4'>
      <div class="weui_msg_com"><div onclick="$('#msg4').fadeOut();" class="weui_msg_close"><i class="icon icon-95"></i></div><div class="weui_msg_src">
      <img src=""></div>
      <p class="weui_msg_comment">长按上方二维码3秒识别二维码</p></div></div>   
</body>
</html>
